<template>
<div class="zuida">
  <!-- 登录注册 -->
  <div class="denglu" v-show="!this.$store.state.show">
    <router-view></router-view>
  </div>
  <!-- 进去登录成功 -->
  <div id="app" v-show="this.$store.state.show">
    <div class="shang" >
      <div class="zuo"></div>
      <div class="you">
        <div class="shang">
          {{username}}
        </div>
        <div class="xia">
          <el-button type="text" @click="exit">退出登录</el-button>
        </div>
      </div>
    </div>
    <div class="xia">
      <div class="zuo">
      <el-row class="tac">
  <el-col :span="12">
    <el-menu
      default-active="/main"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="changeSidebar">
      <el-menu-item index="/main">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="12">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="teacher">教师</el-menu-item>
          <el-menu-item index="student">学生</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="13">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>新增用户</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="insertteacher">教师</el-menu-item>
          <el-menu-item index="insertstudent">学生</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="15">
        <template slot="title">
          <i class="el-icon-help"></i>
          <span>成绩管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="scoreselect">录入/查询</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="classshow">
        <i class="el-icon-data-analysis"></i>
        <span slot="title">课表编辑</span>
      </el-menu-item>
      <el-menu-item index="date">
        <i class="el-icon-date"></i>
        <span slot="title">校历</span>
      </el-menu-item>
      <el-menu-item index="rizhi">
        <i class="el-icon-coin"></i>
        <span slot="title">日志管理</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>
    </div>
    <div class="you">
      <router-view></router-view>
    </div>
    </div>
    
  </div>
</div>
  
</template>
<script>
  export default {
    data(){
      return{
        username:''
      }
    },
    mounted(){
      this.username=localStorage.getItem('username')
    },
    methods: {
      changeSidebar(path){
        // this.$router.replace(path)
        // console.log(path.url);
        if (this.$route.path !== path.url) {
    this.$router.push({ path: path })
  }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      exit(){
        localStorage.setItem('token','')
        localStorage.setItem('username','')
        this.$router.push("/")
      }
    }
  }
</script>
<style lang="less" scoped>
.zuida{
  width: 100%;
}
// 登录阶段
// .denglu{
//   width: 100%;
// }
.shang{
  width: 100%;
  height: 90px;
  display: flex;
  // background:repeat-x url("./img/hh.png") 90% 100% ;
.zuo{
  width: 94%;
  height: 100%;
  background:repeat-x url("./img/hh.png") 90% 100% ;
}
.you{
  width: 5%;
  height: 100%;
  // background-color: aqua;
  .shang{
    margin-left: 20%;
    width: 100%;
    height: 60%;
    // text-align: center;
    line-height: 56px;
    font-size: 16px;
  }
  .xia{
    font-size: 18px;
    width: 100%;
    height: 40%;
    margin-left: 20%;
    line-height: 30px;
  }
}
}
.xia{
  width: 100%;
  height: 100vh;
  display: flex;
}
/deep/ .el-col-12{
  width: 100%;
}
.zuo{
  width: 10%;
}
.you{
  width: 80%;
  // height: 500px;
  margin-left: 70px;
  margin-left: 70px;
  // background-color: red;
}
</style>